<template>
  <div id="tmpl">
    <div id="postcomment">
      <h3>提交评论</h3>
      <p></p>
      <textarea placeholder="去请输入评论内容" v-model="postcontent"></textarea>
      <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
    </div>

    <div id="list">
      <h3>评论列表</h3>
      <div v-for="(item,index) in list">
        <div class="title">
          <span>第{{index+1}}楼</span>
          <span>{{item.user_name}}</span>
          <span>{{item.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}}</span>
        </div>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">{{item.content}}</li>
        </ul>
      </div>
      <button type="button"
              class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
              @click="getmore">
        加载更多...
      </button>

    </div>

  </div>
</template>

<script>
  import common from "../../kits/common"
  import {Toast} from "mint-ui"
  export default {
    props: ['id'],
    data (){
      return {
        postcontent: '',
        list: [],
        ind: [],
        pageindex: 1
      }
    },
    methods: {
      postcomment(){
        if (this.postcontent.trim().length != 0) {
          var url = common.domianapi + "/api/postcomment/" + this.id
          this.$http.post(url, {content: this.postcontent}, {emulateJSON: true}).then(function (info) {
            Toast(info.body.message);
            var newuser= [{
              add_time: new Date(),
              content: this.postcontent,
              user_name: "匿名用户"
            }];
            this.list = newuser.concat(this.list)
          })
        } else {
          Toast("先评论!!")
        }

      },
      getcomment(){
        var url = common.domianapi + "/api/getcomments/" + this.id + "?pageindex=1";
        this.$http.get(url).then(function (info) {
          console.log(info.body.message);
          this.list = info.body.message;

        })
      },
      getmore(){
        this.pageindex++;
        var url = common.domianapi + "/api/getcomments/" + this.id + "?pageindex=" + this.pageindex;
        this.$http.get(url).then(function (info) {
            if(info.body.message.length == 0) {
              return Toast("没有更多评论了!!");
            }
            this.list = this.list.concat(info.body.message)

        })
      }

    },
    created(){
      this.getcomment()

    }

  }
</script>

<style scoped>
  .mui-btn {
    line-height: 4px;
    font-size: 14px;
  }
</style>
